// 首页学科题库列表的每个题库组件

import icon from '@/assets/images/home/subject.png'
import { Button, ProgressBar } from 'antd-mobile'
import './subjectitem.less'
import { useNavigate } from 'react-router-dom'

interface IProp {
  data: IExam
}


export default function SubjectItem({ data }: IProp) {
  const nav = useNavigate();
  return <li className="subject-item flex">
    <div className="icon">
      <img src={icon} alt="" />
    </div>
    <div className="detail">
      <h4>{data.title}</h4>
      {/* 前面这个数字没有数据，所以暂时做不了 */}
      <p> 1 / {data.itemCount} 题</p>
      <ProgressBar percent={1 / data.itemCount * 100} />
    </div>
    <div className='right'>
      <Button onClick={() => nav('/select/' + data.actionCode)} color="primary" fill="solid">练习</Button>
    </div>
  </li>
}